<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('主板详细')" />
	<th:block th:include="include :: datetimepicker-css" />
	<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>

	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-user-edit">
<!--		<h4 class="form-header h4">基本信息</h4>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">股票代码：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.stockCode}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">股票名称：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.stockName}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">吸筹次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.attractingFundsFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">吸筹时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.attractingFundsFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">预准备次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.priorReadyFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">预准备时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.priorReadyFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">准备次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.readyFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">准备时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.readyFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">预冲锋次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.priorBreakFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">预冲锋时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.priorBreakFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">冲锋次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.breakFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">冲锋时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.breakFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">再冲锋次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.againBreakFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">再冲锋时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.againBreakFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">逆转次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.reversionFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">逆转时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.reversionFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">质变次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.qualitativeChangeFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">质变时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.qualitativeChangeFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">革命次数：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="${stockMainBoard.revolutionFrequency}"></div>-->
<!--			</div>-->
<!--			<label class="col-sm-2 control-label">革命时间：</label>-->
<!--			<div class="col-sm-4">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.revolutionFrequencyTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->


		<h4 class="form-header h4">东方财富信息</h4>
		<div class="form-group">
			<label class="col-sm-2 control-label">东方财富人气榜排名：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="${stockSecondBoard.dfcfPopularityEaderboardRanking}"></div>
			</div>
			<label class="col-sm-2 control-label">东方财富人气榜热点：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="${stockSecondBoard.dfcfPopularityEaderboardHotspot}"></div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">东方财富人气榜热点详细：</label>
			<div class="col-sm-10">
				<div class="form-control-static" th:text="${stockSecondBoard.dfcfPopularityEaderboardHotspotDetail}"></div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">东方财富人气榜时间：</label>
			<div class="col-sm-10">
				<div class="form-control-static" th:text="*{#dates.format(stockSecondBoard.dfcfPopularityEaderboardTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
			</div>
		</div>

		<h4 class="form-header h4">同花顺信息</h4>
		<div class="form-group">
			<label class="col-sm-2 control-label">同花顺人气榜排名：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="${stockSecondBoard.thsPopularityEaderboardRanking}"></div>
			</div>
			<label class="col-sm-2 control-label">同花顺人气榜热点：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="${stockSecondBoard.thsPopularityEaderboardHotspot}"></div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">同花顺人气榜热点详细：</label>
			<div class="col-sm-10">
				<div class="form-control-static" th:text="${stockSecondBoard.thsPopularityEaderboardHotspotDetail}"></div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">同花顺人气榜概念：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="${stockSecondBoard.thsPopularityEaderboardConcept}"></div>
			</div>
			<label class="col-sm-2 control-label">同花顺人气榜时间：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="*{#dates.format(stockSecondBoard.dfcfPopularityEaderboardTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
			</div>
		</div>

		<h4 class="form-header h4">开盘啦龙虎榜信息</h4>
		<div class="form-group">
			<label class="col-sm-2 control-label">开盘啦龙虎榜慨念：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="${stockSecondBoard.kplLhbConcept}"></div>
			</div>
			<label class="col-sm-2 control-label">开盘啦龙虎榜时间：</label>
			<div class="col-sm-4">
				<div class="form-control-static" th:text="*{#dates.format(stockSecondBoard.kplLhbConceptTime, 'yyyy-MM-dd')}"></div>
			</div>
		</div>

<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">开盘啦龙虎榜时间：</label>-->
<!--			<div class="col-sm-10">-->
<!--				<div class="form-control-static" th:text="*{#dates.format(stockMainBoard.kplLhbTime, 'yyyy-MM-dd HH:mm:ss')}"></div>-->
<!--			</div>-->
<!--		</div>-->



		<div class="form-group">
			<div class="col-sm-12">
			<!-- 表格容器 -->
			<div class="container">
				<table id="dataTable" class="table table-bordered">
					<thead>
					<tr>
						<th>日期</th>
						<th>游资名称</th>
						<th>日期</th>
						<th>游资名称</th>
					</tr>
					</thead>
					<tbody>
					<!-- 动态填充数据 -->
					</tbody>
				</table>
			</div>

			<script>
				const lhbMainId = [[${mainId}]];
				// console.log("liyanng"+mainId);
				$(document).ready(function() {
					// 调用后端接口获取数据
					$.ajax({
						type : "POST",
						url : "/system/second/board/kplLhb/getData",
						data : {
							"mainId": lhbMainId
						},
						success: function(data) {
							var tableBody = $('#dataTable tbody');
							tableBody.empty(); // 清空表格内容
							data.forEach(function(row) {
								var tr = $('<tr></tr>');
								tr.append('<td>' + row.column1 + '</td>');
								tr.append('<td>' + row.column2 + '</td>');
								tr.append('<td>' + row.column3 + '</td>');
								tr.append('<td>' + row.column4 + '</td>');
								tableBody.append(tr);
							});
						},
						error: function() {
							alert('获取数据失败');
						}
					});
				});
			</script>
			</div>
		</div>







		<h4 class="form-header h4">走势图信息</h4>
		<div class="form-group">
			<label class="col-sm-2 control-label">股票走势图：</label>
		</div>
		<div id="main" style="width: 800px; height: 400px;"></div>
		<th:block th:include="include :: footer" />
		<th:block th:include="include :: datetimepicker-js" />
		<script th:inline="javascript">
			var myChart = echarts.init(document.getElementById('main'));
			var id = 106;
			// 发送AJAX请求到后端API获取数据
			// console.log(mainId+11);
			const mainId = [[${mainId}]];
			const formData = new FormData();
			formData.append('mainId', mainId);
			fetch('/system/second/board/allStockSecondBoardDetail', {
				method: 'POST',
				body: formData
			}).then(response => response.json())
					.then(data => {
						// 处理数据并更新图表
						var option = {
							title: {
								// text: getTitle(data), // 初始化时调用函数设置标题
								text: data[0] ? data[0].stockName : '默认标题', // 初始化时调用函数设置标题.get
								left: 'center'
							},
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								data: data.map(item => item.day)
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								data: data.map(item => item.stockPrice),
								type: 'line',
								smooth: true,
								label: {
									show: true, // 显示标签
									position: 'top', // 标签位置
									formatter: function (params) {
										return params.value; // 显示数值
									}
								}
							}]
						};
						myChart.setOption(option);
					})
					.catch(error => console.error('Error loading the data:', error));
		</script>
	</form>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
	var prefix = ctx + "demo/operate";

	$("#form-user-add").validate({
		onkeyup: false,
		rules:{
			userPhone:{
				isPhone:true
			},
			userEmail:{
				email:true
			},
		},
		focusCleanup: true
	});

	function submitHandler() {
		if ($.validate.form()) {
			$.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
		}
	}
</script>

</body>
</html>
